<template>
  <component
      is="a-modal"
      v-model:visible="visible"
      formData    :width="900"
      :title="title"
      :mask-closable="false"
      :ok-loading="loading"
      @cancel="close"
      @before-ok="submit"
  >
    <!-- 详情信息展示 -->
    <div class="formData-container">
      <!-- 头部信息 -->
      <div class="header-info">
        <h1 class="name">{{ formData.name }}</h1>
        <div class="basic-info">
          <span>{{  getStatusText(formData.gender)}}</span>
          <span>{{ formData.birth_date }}</span>
          <span>{{ formData.age }}岁</span>
          <span>{{ formData.domicile }} | {{ formData.current_residence }}</span>
        </div>
        <div class="contact-info">
          <span>英语等级: {{ formData.english_level }}</span>
          <span>电话: {{ formData.contact_number }}</span>
          <span>邮箱: {{ formData.email }}</span>
        </div>
      </div>
      <!-- 主体内容 -->
      <div class="main-content">
        <!-- 求职意向 -->
        <div class="section career_intention">
          <h2>求职意向</h2>
          <p>{{ formData.career_intention }}</p>
        </div>
        <!-- 工作经历 -->
        <div class="section work-experience">
          <h2>工作经历</h2>
          <div v-for="(experience, index) in formData.work_experiences" :key="index" class="experience-item">
            <h3>{{ experience.companyName }}</h3>
            <p class="position-time">
              <span>{{ experience.position }}</span>

              <span style="margin-left: 60%">{{ experience.timeRange }}</span>
            </p>
            <p class="work-desc">{{ experience.workContent }}</p>
          </div>
        </div>
        <!-- 教育背景 -->
        <div class="section education-background">
          <h2>教育背景</h2>
          <div v-for="(experiences, index) in formData.educationackgrounds" :key="index" class="experience-item">
            <h3>{{ experiences.school }}  <span style="margin-left: 60%">{{ experiences.startTime }} - {{ experiences.endTime }}</span></h3>

            <p class="work-desc">{{ experiences.major }}</p>
          </div>
        </div>
        <!-- 自我介绍 -->
        <div class="section self-introduction">
          <h2>自我介绍</h2>
          <p>{{ formData.self_introduction }}</p>
        </div>
        <!-- 附件部分 -->
        <div class="section attachment-section">
          <h2>附件</h2>
          <a :href="formData.attachment_path" :download="formData.attachment_path"><span style="color: #3370ff">下载简历附件</span></a>
        </div>
      </div>
    </div>
  </component>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { Message, Modal, DatePicker } from "@arco-design/web-vue";
import api from "../api/talent";
import commonApi from "@/api/common";

const emit = defineEmits(["success"]);
// 引用定义
const visible = ref(false);
const loading = ref(false);
const formRef = ref();
const mode = ref("");

let title = computed(() => {
  return "人才详情";
});

// 表单信息
const formData = {
  talent_id: null,
  name: '',
  gender: '',
  birth_date: '',
  english_level: '',
  age: 0,
  domicile: '',
  current_residence: '',
  contact_number: '',
  email: '',
  career_intention: '',
  work_experiences: [
    {
      companyName: '',
      position: '',
      timeRange: '',
      workContent: ''
    }
  ],
  educationackgrounds: [
    {
      school: '',
      startTime: '',
      endTime: '',
      major: ''
    }
  ],
  self_introduction: '',
  attachment_path:  '',
}
// 验证规则，仅对回复内容相关验证可按需添加
const rules = {};

// 日期格式化函数
const formatDate = (dateStr) => {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  return date.toLocaleString();
};

// 获取状态文本
const getStatusText = (gender) => {
  // 这里假设反馈状态 0 为未处理，1 为已处理，可根据实际情况调整
  const statusMap = {
    1: "男",
    2: "女",
  };
  return statusMap[gender] || "未知状态";
};

// 打开弹框
const open = async (type = "add", data = {}) => {

  mode.value = type;
  visible.value = true;

   setFormData(data);
  await initPage();
};

// 初始化页面数据
const initPage = async () => {
  // 若后续需要初始化数据，可在此添加逻辑
};

// 设置数据
const setFormData = async (data) => {

  for (const key in formData) {
    if (data[key] !== null && data[key] !== undefined) {
      if ((key === 'work_experiences' || key === 'educationackgrounds') && typeof data[key] === 'string') {
        // 若 files 是 JSON 字符串，先解析为数组
        try {
          formData[key] = JSON.parse(data[key]);
        } catch (e) {
          formData[key] = [];
        }
      } else {
        formData[key] = data[key];
      }
    }
  }
};

// 数据保存
const submit = async (done) => {
  const validate = await formRef.value?.validate();

};

// 关闭弹窗
const close = () => (visible.value = false);

defineExpose({ open, setFormData });
</script>

<style scoped>
/* 整体容器样式 */
.formData-container {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}

/* 头部信息样式 */
.header-info {
  /*text-align: center;*/
  margin-bottom: 30px;
}
.name {
  font-size: 28px;
  margin-bottom: 10px;
}
.basic-info span,
.contact-info span {
  margin-right: 15px;
}

/* 主体内容样式 */
.main-content {
  line-height: 1.6;
}
.section {
  margin-bottom: 30px;
}
h2 {
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}
.experience-item,
.education-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
}
.position-time,
.education-time {
  color: #666;
}
</style>
